import React, { Component } from 'react';
import styles from './index.less';
import Title from '../../../commonComp/Title';
import ChartTitle from '../../../commonComp/ChartTitle';
import LeftChart from './compoents/LeftChart';
import RightChart from './compoents/RightChart';

export default class DataQuality extends Component {
  state = { height: 0 };

  componentDidMount() {
    this.setHeight();
    window.addEventListener('resize', this.eventHeight);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.eventHeight);
  }

  eventHeight = () => {
    this.setHeight();
  };

  setHeight = () => {
    const tableComp = document.getElementById('divLeft');
    this.setState({ height: tableComp.clientHeight });
  };

  render() {
    return (
      <div className={styles.root}>
        <Title title={'数据质量分析'} />
        <div className={styles.context}>
          <div className={styles.left} id="divLeft">
            <ChartTitle title={'各渠道数据质量异常数据源占比'} />
            <div className={styles.chart}>
              <LeftChart height={this.state.height} />
            </div>
          </div>
          <div className={styles.right}>
            <ChartTitle title={'各设备数据质量异常数据源占比'} />
            <div className={styles.chart}>
              <RightChart height={this.state.height} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
